<template>
  <div>
    <el-button size="mini" type="primary" @click="selectDir">选择</el-button>
    <el-button size="mini" type="success" v-if="dirRoot.length" @click="dialogVisible = true">继续查看</el-button>
    <el-dialog
      title="文件夹内容"
      :visible.sync="dialogVisible"
      width="30%"
      v-dialogDrag
      v-dialogDragHeight
    >
      <el-tree :data="dirRoot" :props="props" node-key="id" empty-text="请绑定目录">
        <template slot-scope="{ node, data }">
          <div>
            <i class="el-icon-folder" v-if="data.kind == 'directory'" />
            <i class="el-icon-document" v-else />
            &nbsp;
            <span>{{ data.name }}</span>
          </div>
        </template>
      </el-tree>
      <span slot="footer">
        <el-button @click="dialogVisible = false">关 闭</el-button>
      </span>
    </el-dialog>
  </div>
</template>
<script>
import { selectDir } from '../../utils/fileStreamUtil'
export default {
  data() {
    return {
      props: { children: "children", label: "name", isLeaf: (data, node) => data.kind == 'file' },
      dirRoot: [],
      dialogVisible: false
    }
  },
  methods: {
    async selectDir() {
      const root = await selectDir();
      if (root) {
        this.dirRoot = [root]
        this.dialogVisible = true
      }
    },
  }
}
</script>
<style scoped>
::v-deep .el-dialog {
    height: 65%;
}

::v-deep .el-dialog__body {
  height: 65%;
  overflow: hidden;
  overflow-y: auto;
}
</style>